<template>
    <a-sub-menu key="sub2">
        <template #title>事件管理</template>
        <a-menu-item key="setting:3" @click="handleAudit">事件审核</a-menu-item>
        <a-menu-item key="setting:4" @click="changeEventAddUpdateIsShow">事件添加</a-menu-item>
        <!-- 当点击事件查询时变为取消查询 -->
        <a-menu-item key="setting:5" v-if="!searchFlag" @click="handleSearch">事件查询</a-menu-item>
        <a-menu-item v-else key="setting:5.1" @click="handleSearch">取消查询</a-menu-item>
        <a-menu-item key="setting:6" @click="eventUpdate">事件更新</a-menu-item>
    </a-sub-menu>
    <!-- 使用了自动引入组件的包 事件查询组件 -->
    <!-- 审核组件 -->
    <EventAudit :isShow="auditIsShow" @changeIsShow="handleAudit" />
    <!-- 搜索组件 -->
    <EventSearch :isShow="searchVisible" :fldNames="fldNames" :features="features"
        @changeIsShow="changeEventSearchIsShow" @hotMapIsShow="changeHotMapIsShow" />
    <!-- 热力图的抽屉组件 -->
    <HeatMap :isShow="hotMapVisible" @changeIsShow="changeHotMapIsShow"></HeatMap>
    <!-- 事件添加和更新的组件 -->
    <EventAddUpdate :isShow="eventAddUpdateIsShow" :position="position" :addUpdate="addUpdate" :updateData="updateData"
        @changeIsShow="changeEventAddUpdateIsShow" />
</template>
<script setup>
import { createDraw } from 'assets/libs/utils/draw'
import { ref } from 'vue';
/* 从pinia引入地图 */
import { useMapStore } from 'stores/mapStore.js'
import { searchEvent } from 'assets/libs/utils/searchEvent'
import { storeToRefs } from 'pinia';
import { Query } from "assets/libs/utils/ES6Query.js";
/* 获取地图容器 */
const { map } = storeToRefs(useMapStore())
/* 控制对话框组件渲染 */
const searchVisible = ref(false)
const hotMapVisible = ref(false)
const handleVisible = () => {
    hotMapVisible.value = !hotMapVisible.value
    console.log(searchVisible.value);
}

/* 数据渲染 */
const fldNames = ref([])
const features = ref([])
/* 取消对话框 */
/* 关闭事件搜索 */
const changeEventSearchIsShow = (e) => {
    searchVisible.value = e
    searchFlag.value = false
}
/* 关闭热力图 */
const changeHotMapIsShow = (e) => {
    hotMapVisible.value = e
    searchFlag.value = false
}
/* 定义一个标志 */
const searchFlag = ref(false)
/* 点击查询渲染对话框 */
const handleSearch = () => {
    /* 如果不是正在搜索的状态 */
    if (!searchFlag.value) {
        searchFlag.value = true
        console.log("开始查询");
        /* 把定义的查询信息传递出去,以及控制弹窗的显示隐藏 */
        fldNames.value = []
        features.value = []
        searchEvent.activeDraw(fldNames, features, searchVisible)
    } else {
        /* 取消查询 */
        searchFlag.value = false
        searchEvent.exit()
        searchVisible.value = false
    }

    /*     setTimeout(() => {
            console.log("过了5秒");
            console.log(fldNames.value);
            console.log(features.value);
        }, 5000); */
}


/* 事件添加和更新 */
const eventAddUpdateIsShow = ref(false)
/* 事件添加 */
/* 坐标 */
const position = ref(null)
/* 画笔 */
const eventDraw = ref(null)
/* 矢量数据源 */
let eventSource
/* 画布图层Layer */
const EventLayer = ref(null)
const changeEventAddUpdateIsShow = () => {
    /* 打开弹窗时关闭弹窗 */
    if (eventAddUpdateIsShow.value) {
        eventAddUpdateIsShow.value = false
    } else {
        /* 创建画笔获取位置,在回调中显示对话框,并把位置传给子组件 */
        // 1创建画布
        /* 画布的矢量数据源 */
        eventSource = new ol.source.Vector({
            wrapx: false,
            crossOrigin: 'Anonymous',
        })
        /* 画布的矢量图层 */
        EventLayer.value = new ol.layer.Vector({
            source: eventSource,
        })
        eventDraw.value = createDraw({
            source: eventSource,
            type: 'Point',
            callback: (e) => {
                /* 获取位置传给子组件 */
                position.value = e.target.sketchCoords_
                /* 打开事件更新窗口 */
                eventAddUpdateIsShow.value = !eventAddUpdateIsShow.value
                /* 重置状态清空图层和画笔 */
                eventSource.clear()
                map.value.removeInteraction(eventDraw.value)
                map.value.removeLayer(EventLayer.value)
                eventSource = null
                eventDraw.value = null
                EventLayer.value = null
            }
        })
        /* 将图层添加到地图容器 */
        map.value.addLayer(EventLayer.value)
        map.value.addInteraction(eventDraw.value)
    }
}

/* ------事件审核------ */
const auditIsShow = ref(false)
const handleAudit = () => {
    auditIsShow.value = !auditIsShow.value
}


/* ------事件更新------ */
/* 标志是添加还是更新 */
const addUpdate = ref(true)
const updateData = ref([])
let key
let mouseMoveKey
const eventUpdate = () => {
    /* 画布的矢量数据源 */
    eventSource = new ol.source.Vector({
        wrapx: false,
        crossOrigin: 'Anonymous',
    })
    console.log("点击了事件更新");
    let sql = `处理状态=0`;
    Query.queryBySql({
        where: sql,
        service: {
            docName: "guanggu",
            //  事件在图层2
            layerId: 2,
        },
        callback: (e) => {
            console.log("查询完毕");
            if (e.TotalCount == 0) return message.warning("没有查询到相应的数据");
            //初始化Zondy.Format.PolygonJSON类
            const format = new Zondy.Format.PolygonJSON();
            //将MapGIS要素JSON反序列化为ol.Feature类型数组
            const features = format.read(e);
            //console.log("查询到的数据", features);
            features.forEach((i) => {
                i.setStyle(new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 10,
                        /* 填充色 */
                        fill: new ol.style.Fill({
                            color: "#ff2d51",
                        }),
                        /* 描边 */
                        stroke: new ol.style.Stroke({
                            color: "rgba(0,255,0,1)",
                            width: 1,
                        }),
                    }),
                }))
            })
            console.log(features);
            eventSource.addFeatures(features);
        },
    });
    sql = `处理状态=1`;
    Query.queryBySql({
        where: sql,
        service: {
            docName: "guanggu",
            //  事件在图层2
            layerId: 2,
        },
        callback: (e) => {
            console.log("查询完毕");
            if (e.TotalCount == 0) return message.warning("没有查询到相应的数据");
            //初始化Zondy.Format.PolygonJSON类
            const format = new Zondy.Format.PolygonJSON();
            //将MapGIS要素JSON反序列化为ol.Feature类型数组
            const features = format.read(e);
            //console.log("查询到的数据", features);
            features.forEach((i) => {
                i.setStyle(new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 10,
                        /* 填充色 */
                        fill: new ol.style.Fill({
                            color: "#ffff22",
                        }),
                        /* 描边 */
                        stroke: new ol.style.Stroke({
                            color: "rgba(0,255,0,1)",
                            width: 1,
                        }),
                    }),
                }))
            })
            eventSource.addFeatures(features);
        },
    });
    /* 画布的矢量图层 */
    EventLayer.value = new ol.layer.Vector({
        source: eventSource,
    })
    /* 将查询到的要素高亮标注显示， */
    map.value.addLayer(EventLayer.value);
    activeMap();
}
//点击地图事件查询
function activeMap() {
    key = map.value.on("click", handleMap); //激活地图点击事件
    mouseMoveKey = map.value.on("pointermove", handleToPointer); //激活地图点击事件
}
//当指向标注时改变鼠标光标状态
function handleToPointer(e) {
    var pixel = map.value.getEventPixel(e.originalEvent);
    var hit = map.value.hasFeatureAtPixel(pixel);
    map.value.getTargetElement().style.cursor = hit ? "pointer" : "";
}
function handleMap(e) {
    var feature = map.value.forEachFeatureAtPixel(
        e.pixel,
        function (feature, layer) {
            return feature;
        }
    );
    if (feature) {
        /* 这个就可以拿到fid,拿到之后去空间数据库查这条数据 */
        Query.queryByFID({
            fid: feature.id_,
            service: {
                name: "guanggu",
                layerId: 2,
            },
            callback: (res) => {
                /* 在回调中关闭查询重置状态打开事件更新窗口并把信息和oid发送过去 */
                /* 把状态改为更新 */
                addUpdate.value = false
                console.log(res);
                /* 传递事件信息 */
                updateData.value = res.SFEleArray
                /* 打开弹窗 */
                eventAddUpdateIsShow.value = true
                /* 重置内容 */
                eventSource.clear();
                ol.Observable.unByKey(key); //移除点击事件
                ol.Observable.unByKey(mouseMoveKey); //移除鼠标移动事件
                map.value.removeLayer(EventLayer.value);
                eventSource = null
                EventLayer.value = null
            }
        });
    }
}
</script>

